<template>
	<view class="f-navbar">
		<view v-if="1" :class="[navbarType==1?'':'f-fixed']"
			:style="[navbarType==1?{height:systemInfo.navBarH+'px'}:{paddingTop:systemInfo.statusBarHeight+'px',zIndex:zIndex}]">
			<!-- 背景色 -->
			<block v-if="showTop">
				<view class="bgColor" v-if="scrollTop>50"
					:style="{height:systemInfo.navBarH+'px',background: image,backgroundPosition: position,backgroundRepeat:repeat, opacity: navbarType == 5 ? transparentValue :''}">
					<image :src="image" :mode="imageMode" style="width: 750rpx;"
						:style="{height:systemInfo.navBarH+'px'}" v-if="image"></image>
				</view>
			</block>
			<block v-else>
				<view class="bgColor"
					:style="{height:systemInfo.navBarH+'px',background: image,backgroundPosition: position,backgroundRepeat:repeat, opacity: navbarType == 5 ? transparentValue :''}">
					<image :src="image" :mode="imageMode" style="width: 750rpx;"
						:style="{height:systemInfo.navBarH+'px'}" v-if="image"></image>
				</view>
			</block>

			<view class="u-flex content"
				:style="{height:systemInfo.titleBarHeight+'px',top:systemInfo.statusBarHeight+'px'}">
				<!-- #ifndef MP-BAIDU -->
				<block v-if="navbarType!=4 && isShowLeft">
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" v-if="navbarType==3">
						<view class="u-flex u-home-arrow-left"
							:style="{borderColor:isWhite?'rgba(255,255,255,.5)':'#dadbde'}">
							<view @click="onBack">
								<u-icon name="arrow-left" size="19" :color="leftColor"></u-icon>
							</view>
							<u-line direction="column" :hairline="false" length="16" margin="0 8px"
								:color="isWhite?'rgba(255,255,255,.3)':'#dadbde'"></u-line>
							<view @click="onHome">
								<!-- <u-icon name="home" size="20" :color="leftColor"></u-icon>-->
								<view class="custom-icon custom-icon-home" :style="{fontSize:'40rpx',color:leftColor}">
								</view>
							</view>
						</view>
					</view>
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" @click="leftClick"
						v-else>
						<slot name="left">
							<!-- 左边箭头背景渐变 -->
							<view class="iconBg u-flex"
								:style="{background: 'rgba(0,0,0,'+(navbarType == 5 ?(transparentValue2>0.4?0.4:transparentValue2):0)+')'}">
								<view v-if="iconLeft=='home'" class="custom-icon custom-icon-home"
									:style="{fontSize:'40rpx',color:leftColor}"></view>
								<u-icon v-else :name="iconLeft" size="16" :color="leftColor"></u-icon>
							</view>
							<text v-if="leftText" class="left__text" :style="{color: leftColor}">{{ leftText }}</text>
						</slot>
					</view>
				</block>
				<!-- #endif -->
				<view class="center" :style="{width:titleWidth+'rpx'}">
					<slot name="default">
						<block v-if="navbarType == 5 && transparentTitleColor && isShowTransparentTitle">
							<!-- 透明背景时实现上拉title颜色改变 -->
							<view class="title u-line-1"
								:style="[{opacity: transparentValue2},{color:transparentTitleColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]"
								v-if="transparentValue<proportion">{{title}}</view>
							<view class="title u-line-1"
								:style="[{opacity: transparentValue},{color:fontColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]"
								v-else>{{title}}</view>
						</block>
						<view v-else class="title u-line-1"
							:style="[isShowTransparentTitle?{}:{opacity: navbarType == 5 ? transparentValue :''},{color:fontColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]">
							{{title}}
						</view>
					</slot>
				</view>
				<view class="u-flex right" @click="rightClick">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view v-else :class="[navbarType==1?'':'f-relative']"
			:style="[navbarType==1?{height:systemInfo.navBarH+'px'}:{paddingTop:systemInfo.statusBarHeight+'px',zIndex:zIndex}]">
			<!-- 背景色 -->
			<view class="bgColor"
				:style="{height:systemInfo.navBarH+'px',background: bgColor,background: image,backgroundPosition: position,backgroundRepeat:repeat, opacity: navbarType == 5 ? transparentValue :''}">
				<image :src="image" :mode="imageMode" style="width: 750rpx;" :style="{height:systemInfo.navBarH+'px'}"
					v-if="image"></image>
			</view>
			<view class="u-flex content"
				:style="{height:systemInfo.titleBarHeight+'px',top:systemInfo.statusBarHeight+'px'}">
				<!-- #ifndef MP-BAIDU -->
				<block v-if="navbarType!=4 && isShowLeft">
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" v-if="navbarType==3">
						<view class="u-flex u-home-arrow-left"
							:style="{borderColor:isWhite?'rgba(255,255,255,.5)':'#dadbde'}">
							<view @click="onBack">
								<u-icon name="arrow-left" size="19" :color="leftColor"></u-icon>
							</view>
							<u-line direction="column" :hairline="false" length="16" margin="0 8px"
								:color="isWhite?'rgba(255,255,255,.3)':'#dadbde'"></u-line>
							<view @click="onHome">
								<!--                                <u-icon name="home" size="20" :color="leftColor"></u-icon>-->
								<view class="custom-icon custom-icon-home" :style="{fontSize:'40rpx',color:leftColor}">
								</view>
							</view>
						</view>
					</view>
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" @click="leftClick"
						v-else>
						<slot name="left">
							<!-- 左边箭头背景渐变 -->
							<view class="iconBg u-flex"
								:style="{background: 'rgba(0,0,0,'+(navbarType == 5 ?(transparentValue2>0.4?0.4:transparentValue2):0)+')'}">
								<view v-if="iconLeft=='home'" class="custom-icon custom-icon-home"
									:style="{fontSize:'40rpx',color:leftColor}"></view>
								<u-icon v-else :name="iconLeft" size="16" :color="leftColor"></u-icon>
							</view>
							<text v-if="leftText" class="left__text" :style="{color: leftColor}">{{ leftText }}</text>
						</slot>
					</view>
				</block>
				<!-- #endif -->
				<view class="center" :style="{width:titleWidth+'rpx'}">
					<slot name="default">
						<block v-if="navbarType == 5 && transparentTitleColor && isShowTransparentTitle">
							<!-- 透明背景时实现上拉title颜色改变 -->
							<view class="title u-line-1"
								:style="[{opacity: transparentValue2},{color:transparentTitleColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]"
								v-if="transparentValue<proportion">{{title}}</view>
							<view class="title u-line-1"
								:style="[{opacity: transparentValue},{color:fontColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]"
								v-else>{{title}}</view>
						</block>
						<view v-else class="title u-line-1"
							:style="[isShowTransparentTitle?{}:{opacity: navbarType == 5 ? transparentValue :''},{color:fontColor,width:titleWidth+'rpx',fontSize:fontSize+'rpx'}]">
							{{title}}
						</view>
					</slot>
				</view>
				<view class="u-flex right" @click="rightClick">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<!-- 防止塌陷高度 -->
		<view :style="{height:systemInfo.navBarH+'px'}"></view>
	</view>
</template>

<script>
	// 主页页面的页面路径
	// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
	// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
	const mainPagePath = ['pages/index/index', 'pages/index/category', 'pages/index/order', 'pages/index/user'];
	//返回首页的地址
	const homePath = '/pages/index/index';
	//白色表达值
	const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
	const colorTheme = '#303133'; //字体、左边箭头颜色等默认颜色
	export default {
		name: 'wlk-navbar',
		props: {
			title: {
				type: String,
			},
			showTop: {
				type: Boolean,
				default: false
			},
			// navbarType等于5透明背景时title是否显示
			isShowTransparentTitle: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			// 左边文字
			leftText: {
				type: String
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: '#fff'
			},
			// 背景图片
			image: {
				type: String,
				default: "url(https://feiya.qfxwl.com/uploads/20240723/1dcb76e189e596e6146455385a121b4e.png)"
			},
			position: {
				type: String,
				default: 'top'
			},
			repeat: {
				type: String,
				default: 'no-repeat'
			},
			// 背景图片mode
			imageMode: {
				type: String,
				default: 'aspectFill'
			},
			// 导航状态 0、默认固定在顶部 1、不固定在顶部 2、自定义点击事件 3、同时显示箭头和去首页按钮 4、不显示左侧内容 5、上拉渐变显示背景色
			navbarType: {
				type: [String, Number],
				default: 0
			},
			// 是否显示左侧内容
			isShowLeft: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			// 左边按钮icon
			leftIcon: {
				type: String,
				default: 'arrow-left'
			},
			// 左边icon颜色
			leftIconColor: {
				type: String,
				default: colorTheme
			},
			// 屏幕滑动距离顶部距离(透明固定导航比传)
			scrollTop: {
				type: [String, Number],
				default: 0
			},
			//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
			fontColor: {
				type: String,
				default: colorTheme
			},
			// navbarType等于5透明背景时title颜色
			transparentTitleColor: {
				type: String
			},
			titleWidth: {
				type: [String, Number],
				default: 400
			},
			fontSize: {
				type: [String, Number],
				default: 30
			},
			// 背景渐变色
			gradient: {
				type: String
			},
			// 背景渐变色
			isShowSearch: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			// 是否设置防止塌陷高度
			isFillHeight: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			zIndex: {
				type: String,
				default: '998'
			},
			// firstPage: {
			// 	type: Boolean,
			// 	default: function() {
			// 		return false;
			// 	}
			// },
			// homePage: {
			// 	type: Boolean,
			// 	default: function() {
			// 		return false;
			// 	}
			// },
			// fullPath: {
			// 	type: String,
			// 	default: ''
			// }
		},
		data() {
			return {
				// systemInfo:base.systemInfo,
				systemInfo: {
					statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
					// #ifdef MP-ALIPAY
					navBarH: uni.getSystemInfoSync().statusBarHeight, //菜单栏总高度--单位px
					titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
					// #endif
					// #ifndef MP-ALIPAY
					navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
					titleBarHeight: 44, //标题栏高度--单位px
					// #endif
				},
				//当前页面是否是第一个页面
				firstPage: false,
				homePage: false,
				//透明度值
				transparentValue: 0,
				iconLeft: 'arrow-left', //左边icon
				// 上次显示的导航栏颜色
				lastFrontColor: '',
				//字体色
				// navFontColor: colorTheme,
				isWhite: false, //是否白色
				proportion: 0.5, //navbarType==5发生渐变的比值
				oldLeftIconColor: colorTheme, //首次获取的左边icon颜色
			}
		},
		watch: {
			leftIconColor: {
				immediate: true,
				handler(val) {
					if (val != colorTheme && this.oldLeftIconColor == colorTheme) {
						this.oldLeftIconColor = val
					}
				}
			},
			leftIcon: {
				immediate: true,
				handler(val) {
					this.iconLeft = val
				}
			},
			// fontColor: {
			//     immediate: true,
			//     handler (val) {
			//         this.navFontColor = val;
			//         this.settingColor();
			//     }
			// },
			navbarType: {
				immediate: true,
				handler(val) {
					if (val == 5) {
						this.transparentValue = 1;
						// if (this.scrollTop > 180) {

						// } else {
						// 	this.transparentValue = this.scrollTop / 180;
						// }
					}
				}
			},
			scrollTop(val) {
				this.pageScroll({
					scrollTop: val
				});
			}
		},
		computed: {
			leftColor() {
				var color2 = colorTheme
				if (this.leftIconColor == color2) { //如果等于默认值
					// 背景不是白色或者背景是渐变色
					if (!whiteList.includes(this.bgColor) || this.gradient || this.navbarType == 5) {
						color2 = '#fff'
					}
				} else {
					color2 = this.leftIconColor
				}
				return color2
			},
			// 字体色
			navFontColor() {
				var n = colorTheme
				if (this.transparentValue > this.proportion) {
					n = this.fontColor
				} else {
					n = this.transparentTitleColor || this.fontColor
				}
				return n
			},
			// 字体透明度
			transparentValue2() {
				var val = 1 - this.transparentValue
				return val
			},
		},
		created() {
			this.pageScroll({
				scrollTop: this.scrollTop
			});
			//获取所有页面

			this.$nextTick(() => {
				let currentPages = getCurrentPages();
				// console.log(currentPages[0].$page);
				let fullPath = currentPages[0].$page && currentPages[0].$page.fullPath
				let pageLen = currentPages.length;
				//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
				if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
					this.firstPage = true;
					this.iconLeft = 'home'
				}

				if (fullPath == homePath) {
					this.homePage = true;
				} else {
					this.navbarType == 1
				}
			})
		},
		methods: {
			onBack() {
				if (this.firstPage) {
					uni.reLaunch({
						url: homePath
					});
				} else {
					uni.navigateBack();
				}
			},
			onHome() {
				uni.switchTab({
					url: homePath
				});
			},
			leftClick() {
				if (this.navbarType == 2) {
					this.$emit('leftClick');
				} else {
					this.onBack()
				}
			},
			rightClick() {
				this.$emit('rightClick');
			},
			pageScroll(e) {
				if (this.navbarType == 5) {
					this.transparentValue = 1;
					// if (e.scrollTop && e.scrollTop > 0) {
					// 	if (e.scrollTop > 180) {

					// 	} else {
					// 		this.transparentValue = e.scrollTop / 180;
					// 	}
					// } else {
					// 	this.transparentValue = 0;
					// }

					if (whiteList.includes(this.bgColor)) {
						if (this.transparentValue > this.proportion) {
							// this.leftIconColor = this.$u.colorToRgba(this.$u.rgbToHex(this.oldLeftIconColor),this.transparentValue)
							// this.leftIconColor = this.colorToRGB(this.oldLeftIconColor, this.transparentValue)
						} else {
							// this.leftIconColor = `rgba(255,255,255,${1-this.transparentValue})`
						}
					}
				}
				this.settingColor();
			},
			//设置手机状态栏颜色
			settingColor() {
				let navColor = this.navFontColor;
				let frontColor = '#000000';
				if (whiteList.includes(navColor)) {
					frontColor = '#ffffff';
					this.isWhite = true
				}
				if (this.lastFrontColor == frontColor) {
					return;
				}
				setTimeout(() => {
					this.lastFrontColor = frontColor;
					// 改变手机状态栏颜色
					// #ifndef MP-ALIPAY
					uni.setNavigationBarColor({
						frontColor: frontColor,
						backgroundColor: '#FFFFFF'
					});
					// #endif
					// #ifdef MP-ALIPAY
					uni.setNavigationBarColor({
						backgroundColor: frontColor == '#000000' ? '#ffffff' : '#000000'
					});
					// #endif
				}, 150);

			},
			// 主题色颜色转换RGB（一般用于主题色有透明度时）
			colorToRGB: function(val, opa) {
				const pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则
				const flag = typeof opa == 'number'; //判断是否有设置不透明度
				if (!pattern.test(val)) { //如果值不符合规则返回空字符
					return '';
				}
				let v = val.replace(/#/, ''); //如果有#号先去除#号
				let rgbArr = [];
				let rgbStr = '';
				for (let i = 0; i < 3; i++) {
					let item = v.substring(i * 2, i * 2 + 2);
					let num = parseInt(item, 16);
					rgbArr.push(num);
				}
				rgbStr = rgbArr.join();
				rgbStr = 'rgb' + (flag ? 'a' : '') + '(' + rgbStr + (flag ? ',' + opa : '') + ')';
				return rgbStr;
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.f-navbar {
		width: 750rpx;

		.f-fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10000;
		}

		.f-relative {
			position: relative;
		}

		.bgColor {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.title {
			text-align: center;
			color: #303133;
		}

		.center {
			margin: 0 auto;
		}

		.left,
		.right {
			padding: 0 24rpx;
			position: absolute;
			top: 0;
			bottom: 0;
		}

		.left {
			left: 0;

			&--hover {
				opacity: 0.7;
			}

			&__text {
				font-size: $font-lt;
				margin-left: 3px;
			}

			.iconBg {
				width: 50rpx;
				height: 50rpx;
				background: rgba(0, 0, 0, .4);
				border-radius: 25rpx;
				justify-content: center;
			}
		}

		.right {
			right: 0;
		}

		.u-home-arrow-left {
			justify-content: space-between;
			border-radius: 100px;
			padding: 3px 7px;
			opacity: .8;
			border: .5px solid #dadbde;
		}
	}
</style>